<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
const tableData = [
  {
    title: "当前版本",
    value: "V3.06"
  },
  {
    title: "操作系统",
    value: "Linux"
  },
  {
    title: "当前PHP版本",
    value: "PHP 7.4.12"
  },
  {
    title: "剩余空间",
    value: "100G"
  },
  {
    title: "执行时间限制",
    value: "300秒"
  },
  {
    title: "北京时间",
    value: "2021-08-12 10:00:00"
  },
  {
    title: "系统特色",
    value: "安全/稳定/高效/更新快"
  }
];
</script>

<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header flex flex-wrap justify-between">
        <span class="card-header_title">版本信息</span>
      </div>
    </template>
    <div class="">
      <el-table
        :data="tableData"
        border
        :show-header="false"
        style="width: 100%"
      >
        <el-table-column width="200px">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.title }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="scope">
            <div>{{ scope.row.value }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<style scoped lang="scss"></style>
